<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div class="add">
    <div class="add-title"><span> &lt;{{$t("m.home")}}</span>{{$t("ad.createDatxWallet")}}</div>
    <div class="add-content">
      <div class="flex">
        <div :class="{active:tabindex===0}"><span>1</span>{{$t("ad.createPubkeyPriKey")}}</div>
        <div>--·--·--</div>
        <div :class="{active:tabindex===1}"><span>2</span>{{$t("ad.setAccount")}}</div>
        <div>--·--·--</div>
        <div :class="{active:tabindex===2}"><span>3</span>{{$t("ad.transferAccount")}}</div>
      </div>
      <div class="add-content-child" v-if="tabindex===0">
        <div class="step1">
          <div class="step">Step1：{{$t("ad.createPubkeyPriKey")}}</div>
          <div class="newkey">
            <button @click="build">{{$t("ad.generateNewkey")}}</button>
          </div>
          <div class="inputkey"><input v-model="inputPubKey" type="text" :placeholder="this.$t('ad.pubkeyPlaceholder')"></div>
          <div class="ok">
            <button @click="step1()">{{$t("ad.confirm")}}</button>
          </div>
        </div>

      </div>
      <div class="add-content-child" v-if="tabindex===1">
        <div class="step1">
          <div class="step">Step2：{{$t("ad.setAccount")}}</div>
          <div class="inputkey">
            <p>{{$t("ad.accountName")}}</p>
            <input type="text" v-model="userName" :placeholder="this.$t('ad.setAccountNamePlaceholder')">
            <p style="color: #98889b">{{$t("ad.noticeAccountName")}}</p>
          </div>
          <div class="ok">
            <button @click="step2()">{{$t("ad.confirm")}}</button>
          </div>
        </div>

      </div>
      <div class="add-content-child" v-if="tabindex===2">
        <div class="step1">
          <div class="step">Step3：{{$t("ad.transferAccount")}}
            <p>{{$t("ad.noticeTransferAccountOne")}}<br/>
              {{$t("ad.noticeTransferAccountTwo")}}<br/></p>
          </div>
          <div class="inputkey1">
            <p>{{$t("ad.transferAmount")}}</p>
            <input type="text" placeholder="alice" v-model="datxAmount" readonly="readonly">
          </div>
          <div class="inputkey1">
            <p>{{$t("ad.receivableAmount")}}</p>
            <input type="text" placeholder="alice" v-model="datxReceive" readonly="readonly">
          </div>
          <div class="inputkey1">
            <p>{{$t("ad.Remarks")}}（Memo）<span>{{$t("ad.RemarksInformation")}}</span></p>
            <input type="text" v-model="memo" readonly="readonly"/></div>
          <div class="inputkey1">
            <p>{{$t("ad.inPssword")}}</p>
            <input type="password" :placeholder="this.$t('ad.inPsswordPlaceholder')"  v-model="userPassWard"/>
          </div>
          <div class="ok">
            <button @click="step3()" v-loading.fullscreen.lock="loading"
                    :element-loading-text="this.$t('ad.loadingCreatText')">{{$t("ad.submit")}}</button>
          </div>
        </div>

      </div>
    </div>
    <build-key v-if="showwallet" :keys="keys" @showHand="showHid"></build-key>
  </div>
</template>
<script>
  import buildKey from '@/components/buildKey'
  import {createKeys} from '../../service/eosService'
  import {getResource, newAccount} from '../../api/chainApi'
  import {importAccount} from '../../service/datxService'
  import {AccountUser} from '../../utils/commonUtils'
  import {validateSecret} from '../../utils/commonUtils'

  export default {
    components: {
      buildKey
    },
    data() {
      return {
        loading:false,
        tabindex: 0,
        showwallet: false,
        keys: {
          pubKey: '',
          priKey: ''
        },
        inputPubKey: '',
        userName: '', //用户名
        memo: 'lm2lmxlmxlmx ',
        datxReceive: 'alice',
        datxAmount: '350.65 DATX',
        userPassWard: ''
      }
    },
    methods: {
      onCopy: function (e) {
        // alert('You just copied: ' + e.text)
        this.$message.success(this.$t('ad.copySuccess'));
      },
      onError: function (e) {
        // alert('Failed to copy texts')
      },
      showHid() {
        this.showwallet = false;
      },
      build() {
        let self = this;
        createKeys(function (err, keys) {
          if (err) {
            this.$message.error(this.$t('ad.creatKeyDefault'));
            return false;
          } else {
            self.keys = keys;
            self.showwallet = true;
          }
        });
      },
      importWallethandle() {
        this.showwallet = true;
        console.log(this.showwallet)
      },
      addwallet() {
        this.$router.push('add')
      },
      tab(index) {
        this.tabindex = index;
      },
      step1() {
        if (!this.inputPubKey || this.inputPubKey !== this.keys.pubKey) {
          this.$message.error(this.$t('ad.shuruCreatkey'));
          return false;
        } else {
          this.tabindex = 1;
        }
      },
      step2() {
        if (!AccountUser(this.userName)) {
          this.$message.error(this.$t('ad.setAccountNamenotice'));
          return false;
        } else {
          getResource(this.userName).then(res => {
            if (res.data) {
              this.$message.error(this.$t('ad.accountExist'));
            } else {
              this.memo = this.userName + ' ' + this.keys.pubKey;
              this.tabindex = 2;
            }
          })
        }
      },
      step3() {
        if(validateSecret(this.userPassWard)){
          this.loading=true;
          let param = {
            account: this.userName,
            to: this.datxReceive,
            quantity: this.datxAmount,
            memo: this.memo
          };
          newAccount(param).then(response => {
            if (response.code === 200 && response.data && response.message === 'OK') {
              let res = importAccount(this.keys.priKey, this.userPassWard, this.userName, 'created')
              if (res) {
                this.loading=false;
                this.$message.error(res);
              } else {
                this.loading=false;
                this.$message.success(this.$t('ad.importSuccess'));
                this.$router.push({path: '/'});
              }
            }else {
              this.loading=false;
              this.$message.error(response.message);
            }
          })
        }else {
          this.$message.error(this.$t('ad.passwordDefaule'));
        }

      },

    }
  }
</script>
<style lang="less" scoped>
  .add {
    padding-bottom: 40px;
    .add-title {
      color: rgba(0, 0, 0, 0.6);
      font-size: 30px;
      padding: 25px 0;
      // line-height: 60px;
      display: flex;
      align-items: center;
      span {
        color: #000000;
        font-size: 16px;
        margin-right: 10px;
      }
    }
    &-content {
      background: #fff;
      min-height: 300px;
      padding: 30px 0 80px 0;
      .flex {
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          font-size: 16px;
          color: #98889b;
          padding: 0 10px;
          span {
            display: inline-block;
            width: 34px;
            height: 34px;
            background-color: #b3b3b3;
            line-height: 34px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            border-radius: 50%;
            margin-right: 5px;
          }
          &.active {
            span {
              background-color: #98889b;
            }
          }
          &:nth-child(2n-1) {
            cursor: pointer;
          }
        }
      }
      .add-content-child {
        padding: 50px 0;
        .step1 {
          width: 550px;
          margin: 0 auto;
        }
        .step {
          font-size: 16px;
          font-weight: bold;
          color: #000000;
          padding: 20px 0;
          p {
            font-size: 10px;
            color: #98889b;
            font-weight: normal;
            padding: 15px 0;
            line-height: 18px;
          }
        }
        .newkey {
          padding: 30px 0 0 0;
          text-align: center;
          button {
            border-radius: 4px;
            border: none;
            background-color: #98889b;
            width: 193px;
            height: 41px;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
          }
        }
        .inputkey {
          padding: 30px 0;
          input {
            width: 100%;
            height: 40px;
            border-radius: 4px;
            border: solid 1px #e0e0e0;
            padding: 0 15px;
          }
          p {
            font-size: 14px;
            color: #666;
            padding: 10px 0;
            span {
              font-size: 10px;
            }
          }
        }
        .inputkey1 {
          padding: 15px 0;
          input {
            width: 100%;
            height: 40px;
            border-radius: 4px;
            border: solid 1px #e0e0e0;
            padding: 0 15px;
          }
          p {
            font-size: 14px;
            color: #666;
            padding: 10px 0;
            span {
              font-size: 10px;
            }
          }
        }
        .ok {
          button {
            border-radius: 4px;
            border: none;
            background-color: #98889b;
            width: 100%;
            height: 41px;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }

</style>


